import React, { useState } from 'react'
import './login.css'
import axios from 'axios'
import { Form, Button, Input } from '@nutui/nutui-react'
import { useNavigate } from 'react-router-dom'
import { message } from 'antd'

export default function Register() {
let navigate = useNavigate()
let register =async (val)=>{
    if(code!=mcode) return message.error('验证码错误')
    let res=await axios.post('/szh/register',{phone:val.phone,password:val.password})
    if(res.data.code==200){
        navgite('/index/home')
        localStorage.setItem('accessToken',res.data.accessToken)
        localStorage.setItem('refreshToken',res.data.refreshToken)
        message.success('注册成功')
    }else{
      message.error(res.data.msg)
    }
}
let [codemsg,setcodemsg] = useState('获取验证码')
let [code,setcode] = useState('')
let [mcode,setmcode] = useState('')
let [phone,setPhone] = useState('')
let [num,setnum] = useState(60)
let phoneRegex = /^1[3-9]\d{9}$/
let getcode = async ()=>{
  if(!phoneRegex.test(phone)) return message.error('请输入正确的手机号')
  let res = await axios.post('/szh/get_pcode',{phone:phone})
  if(res.data.code==1) return message.error('操作过于频繁，请稍后再试')
  if(res.data.code==200){
    message.success('验证码已发送')
    setmcode(res.data.pcode)
    setcodemsg(`${num}s`)
    let times = setInterval(()=>{
      setnum(num--)
      setcodemsg(`${num}s`)
      if(num<0){
        clearInterval(times)
        setcodemsg('重新获取')
      }
    },1000)
  }
}
  return (
    <div className='register'>
      <div className='register-form'>
        <h1 className='title'>Welcome to Register</h1>
        <Form
          style={{ width: '90%', borderRadius: ".625rem" }}
          layout='horizontal'
          footer={
            <>
              <Button nativeType="submit" block type="primary">
                注册
              </Button>
              <div className='sub-f'>已有账号?
                <span className='to-reg' onClick={() => {navigate('/login')}}>前往登录</span>
                <span style={{ color: '#999', padding: '0 0.125rem' }}>/</span>
                <span>忘记密码</span>
              </div>
            </>

          }
          onFinish={(value) => {
            register(value)
          }}
        >
          <Form.Item name='phone' label='手机号' validateTrigger="onSubmit" rules={[
            { required: true, message: '请输入手机号' },
            { pattern: /^1[3-9]\d{9}$/, message: '请输入正确的手机号' }
          ]}>
            <Input placeholder='请输入手机号' value={phone} onChange={val=>setPhone(val)}/>
          </Form.Item>
          <Form.Item name='code' label='验证码' rules={[
            { required: true, message: '请输入验证码' }
          ]} >
            <div style={{display:'flex',alignItems:'center'}}>
              <Input value={code} onChange={val=>{setcode(val);console.log(val);
              }} placeholder='验证码' />
              <Button size='mini' type='primary' onClick={getcode} disabled={codemsg!='获取验证码'&&codemsg!='重新获取'}>{codemsg}</Button>              
            </div>
          </Form.Item>
          <Form.Item name='password' label='密码' rules={[
            { required: true, message: '请输入密码' },
            { max: 12, message: '请输入6-12位密码' },
            { min: 6, message: '请输入6-12位密码' },
          ]}>
            <Input placeholder='请设置密码' type='password' />
          </Form.Item>
        </Form>
      </div>
    </div>
  )
}
